<template>
  <section id='foot_guide'>
    <section
      v-for="(item, index) in menuList"
       @click = "gotoAddress(item.address)"
       class="guide-item"
    >
      <img :src="activeTab === index ? item.activeIco : item.ico" :alt="item.name">
      <span :class="{active: activeTab === index}" v-text="item.name">-</span>
    </section>
  </section>
</template>

<script>
export default {
  props: {
    activeTab: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data () {
    return {
      menuList: [
        {
          name: '邂逅',
          ico: require('../../assets/images/ico/ico_meet.png'),
          activeIco: require('../../assets/images/ico/ico_meet_active.png'),
          address: '/meet'
        },
        {
          name: '互动',
          ico: require('../../assets/images/ico/ico_interact.png'),
          activeIco: require('../../assets/images/ico/ico_interact_active.png'),
          address: '/interact'
        },
        {
          name: '消息',
          ico: require('../../assets/images/ico/ico_msg.png'),
          activeIco: require('../../assets/images/ico/ico_msg_active.png'),
          address: '/messages'
        },
        {
          name: '探索',
          ico: require('../../assets/images/ico/ico_explore.png'),
          activeIco: require('../../assets/images/ico/ico_explore_active.png'),
          address: '/explore'
        },
        {
          name: '我的',
          ico: require('../../assets/images/ico/ico_profile.png'),
          activeIco: require('../../assets/images/ico/ico_profile_active.png'),
          address: '/profile'
        }
      ]
    }
  },
  methods: {
    gotoAddress(path){
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/mixin";
#foot_guide{
  position: fixed;
  display: flex;
  @include wh(100%, 5rem);
  background-color: #fff;
  box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}
.guide-item{
  display: flex;
  flex: 1;
  padding: .6rem;
  text-align: center;
  flex-direction: column;
  align-items: center;
  img {
    height: 2.2rem;
  }
  .icon_style{
    @include wh(.8rem, .8rem);
    margin-top: .3rem;
    fill: #ccc;
  }
  span{
    @include sc(1rem, #999);
    &.active {
      color: #dd65a1;
    }
  }
}
</style>
